<template>
  <h2>MTableBase 基础表格组件</h2>

  <h3>MTableBase 属性</h3>
  <table-info type="props" :data="propsTable"></table-info>
  <h3>MTableBase columns说明</h3>
  <table-info type="param" :data="columnsProps"></table-info>

  <h3>案例</h3>
  <code-demo-mobile :code="htmlCode" :scriptCode="scriptCode">
    <div style="padding: 20px">
      <m-table-base :data="data" :columns="columns">
        <template #yearValue="{ row }">
          {{ row.amount }}
          （变化率{{ row.rate }}）
        </template>
      </m-table-base>
    </div>
  </code-demo-mobile>
</template>

<script setup>

const data = [
  { name: '指标1', rate: '15%', direction: 'UP', amount: '21' },
  { name: '指标2', rate: '16%', direction: 'DOWN', amount: '22' },
  { name: '指标3', rate: '17%', direction: 'FLAT', amount: '30' },
]

const columns = [
  { label: '指标', prop: 'name', align: 'right', width: '30%' },
  {
    label: '2021',
    prop: 'year',
    width: '50%',
    valueSlot: 'yearValue',
  },
]

// prettier-ignore
const propsTable = [
  { name: 'columns', desc: '列配置', type: 'Array<{ label: string, prop: string, width?: string || number, formatter?: Function(row, column, cellValue), align?: string, labelSlot?: string, valueSlot?: string }>', },
  { name: 'data', desc: '数据', type: 'Array', default: '', },
]

// prettier-ignore
const columnsProps = [
  { name: 'label', desc: '列标题', type: 'string' },
  { name: 'prop', desc: '字段名称', type: 'string' },
  { name: 'width', desc: '列宽度', type: 'string,number' },
  { name: 'formatter', desc: '用来格式化内容，如果返回空值，则会显示 emptyCellText', type: 'Function(row, column, cellValue)' },
  { name: 'align', desc: '列的对齐方式', type: 'string', enums: 'left / center / right', default: 'center' },
  { name: 'labelSlot', desc: '列标题的插槽名，scope 为 { column, $index }', type: 'string' },
  { name: 'valueSlot', desc: '列值的插槽名，scope 为 { row, column, $index }', type: 'string' },
]

const htmlCode = `<m-table-base :data="data" :columns="columns">
  <template #yearValue="{ row }">
    {{ row.amount }}
    （变化率{{ row.rate }}）
  </template>
</m-table-base>`

const scriptCode = `const data = [
  { name: '指标1', rate: '15%', direction: 'UP', amount: '21' },
  { name: '指标2', rate: '16%', direction: 'DOWN', amount: '22' },
  { name: '指标3', rate: '17%', direction: 'FLAT', amount: '30' },
]

const columns = [
  { label: '指标', prop: 'name', align: 'right', width: '30%' },
  {
    label: '2021',
    prop: 'year',
    width: '50%',
    valueSlot: 'yearValue',
  },
]`
</script>
